<template>
	<view>
		<view class="header">
			<view class="u-flex-nowrap u-row-between u-flex page-font">
				<view class="u-flex">请输入工单编号或扫码</view>
			</view>
			<view class="u-flex-nowrap u-row-around u-flex page-font">
				<u-form class="u-flex u-flex-nowrap u-row-around">
					<u-form-item>
						<u-input v-model="scanResult" :type="type" height=50 placeholder="请输入工单编号" clearable />
					</u-form-item>
					<view class="inputTips" v-if="user.departmentName == '喷涂车间'">提示：工单编号例如:5104-2306240002</view>
					<view class="inputTips" v-else>提示：工单编号例如:5103-2207010105</view>
					<u-radio-group
					    v-model="processName"
					    placement="row"
						  @change="processchange"
					  >
					    <u-radio
					      :customStyle="{marginBottom: '8px'}"
					      v-for="(item, index) in gxlist"
					      :key="index"
					      :label="item.name"
					      :name="item.name"
					    >
						{{item.name}}
					    </u-radio>
					  </u-radio-group>
					<u-form-item class="u-flex u-row-center">
						<u-button size="medium" type="success" @click="getPtBindingUser">查询</u-button>
					</u-form-item>
				</u-form>
				<view class="u-flex-nowrap u-flex-col u-row-center u-col-center" @click="scanFun">
					<u-icon name="scan" color="#2979ff" size="100"></u-icon>
					<view class="$u-type-primary">点击扫码</view>
				</view>
			</view>
		</view>
		
		<!-- 条形码包含的工位信息 -->
		<view>
			<!-- :style="background-color: `${item.qcAffirm == 0 ? '#FFEFD5' : '#90EE90'}`" -->
			<view class="list-item-wrapper" :style="onlineStyle[index]" v-bind:id="index" v-for="(item,index) in List" :key="index">
				<view style="padding: 20rpx">
					<view class="list-item">
						<view>计划批号</view>
						<view>{{item.orderPlanNo}}</view>
					</view>
					<view class="list-item">
						<view>工单品号</view>
						<view>{{item.component}}</view>
					</view>
					<view class="list-item">
						<view>条码</view>
						<view>{{item.deviceBarcode}}</view>
					</view>
					<view class="list-item">
						<view>工艺名称</view>
						<view>{{item.processName}}</view>
					</view>
					<view class="list-item">
						<view>扫码时间</view>
						<view>{{item.scanTime}}</view>
					</view>
					<view class="list-item">
						<view>扫码数量</view>
						<view>{{item.completionQuantity}}</view>
					</view>
					<view class="list-item">
						<view>状态</view>
						<view>{{item.qcAffirm == 0 ? '未确定' : '已确定'}}</view>
					</view>
					<view class="operateBtn">
						<u-button v-if="item.qcAffirm == 0" type="warning" @click="examine24(item,index)">确定</u-button>
					</view>
				</view>
			</view>
		</view>	
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { findMachineScanInfo24,updQcAffirm24 } from '../../../utils/index.js'
	export default {
		data() {
			return {
				scanResult: '',							//条形码信息
				List: [],								//条形码包含的制作工位信息
				onlineStyle: ["",""],	//当喷涂车间提交参数后填充的样式
				user: uni.getStorageSync('user'),
				gxlist:[{
                  name: '前处理下挂',
                  disabled: false
                }],
			    processName:'前处理下挂'
			}
		},
		methods: {	
			async examine24(item){
				const { data } = await updQcAffirm24({timeId:item.timeId})
				if(data.code == '1') {
					this.$refs.uTips.show({
						title: data.msg,
						type: 'success',
						duration: '2000'	
					})
					this.getPlanNo()
				} else {
					this.$refs.uTips.show({
						title: data.msg,
						type: 'warning',
						duration: '2000'	
					})
				}
			},
			// 点击按钮，启用扫码函数
			scanFun() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						that.scanResult = that.handleString(res.result)
						that.getPlanNo()
					},
					fail() {
						console.log('识别失败')
					}
				})
			},
			handleString(str){
				let param = str.split('-')
				return param[0] + '-' + param[1]
			},
			// 通过条形码获取planNo，随后与条形码内容一起发到后台获取列表信息
			async getPlanNo() {
				this.List = []
				if(!this.scanResult) return this.$refs.uTips.show({
					title: '工单不能为空！',
					type: 'error',
					duration: '2000'
				})
				if(!this.processName) return this.$refs.uTips.show({
					title: '工艺不能为空！',
					type: 'error',
					duration: '2000'
				})
				let query = {
					deviceDarcode:this.scanResult,
					processName:this.processName
				}
				const { data } = await findMachineScanInfo24(query)
				const errMsg = data.msg
				if(data.code == '1') {
					if(data.data.length){
					    this.$refs.uTips.show({
					    	title: errMsg,
					    	type: 'success',
					    	duration: '2000'	
					    })
					} else {
						this.$refs.uTips.show({
							title: '该工单没有数据',
							type: 'warning',
							duration: '2000'	
						})
					}
					this.List = data.data
					this.List.forEach((item,index)=> {
					    this.judgeStyle(index)
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			async getPtBindingUser(){
					this.getPlanNo()
			},
			judgeStyle(value) {
				if(!this.List[value].qcAffirm) {
					this.onlineStyle[value] = "background-color: #FFEFD5;"
				} else {
					this.onlineStyle[value] = "background-color: #90EE90;"
				}
			},
		},
		onShow() {
		},
		onLoad() {
		},
		onUnload() {
		}
	}
</script>

<style lang="scss" scoped>
.page-font {
	font-size: 40rpx;
}
.list-item-wrapper {
	margin: 20rpx;
	// padding: 20rpx;
	border-radius: 10rpx;
	// background-color: #FFEFD5;
}
.list-item {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 10rpx 10rpx;
}
.buttonGap {
	margin-top: 20rpx;
}
// 上线下线按钮样式
.operateBtn {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.inputTips{
	font-size: 18rpx;
	color: #F56C6C;
}
.isupSubmit{
	background-color: #90EE90;
}
</style>
